<template>
  <div class="top-nav-bar">
    <span @click="toHome">花卉网：你值得一逛</span>
    <div class="function-bar">
      <div>
        <span>你好，{{ userInfo.userName }}</span>
        <span @click="loginOut">退出</span>
      </div>
      <div @click="showEdit">修改个人信息</div>
      <div @click="orderLook">订单查询</div>
      <div @click="payCart">购物车</div>
    </div>
    <el-dialog
      title="修改个人中心"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="账号">
          <el-input v-model="form.userName" placeholder="请输入昵称" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label=" 手机号码">
          <el-input v-model="form.phone" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-upload
          class="upload-demo"
          action="http://192.168.100:8087/flowerMall/goods/uploadApp"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="success"
          :file-list="fileList"
          :limit="1"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传头像</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="revise">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {}, // 用户信息
      dialogVisible: false,
      form: {},
      fileList: []
    }
  },
  created() {
    this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
    this.getUserInfo()
  },
  methods: {
    toHome() {
      this.$router.push({
        path: '/home'
      })
    },
    async getUserInfo() {
      const id = this.userInfo.id
      const { data } = await this.$api.home.selectOne(id)
      console.log(data)
      this.userInfo = data.content
      this.form.userName = this.userInfo.userName
      this.form.password = this.userInfo.password
      this.form.phone = this.userInfo.phone
      // window.localStorage.setItem('userInfo', JSON.stringify(data.content))
    },
    revise() {
      this.form.id = this.userInfo.id
      this.$api.home.updateUser(this.form)
        .then(res => {
          console.log(res)
          if (res.data.state == 200) {
            this.$message.success('修改成功')
            this.getUserInfo()
            this.dialogVisible = false
          }
        })
    },
    success(response, file, fileList) {
      console.log(file)
      this.form.pictureUrl = file.response.content.filePath
    },
    showEdit() {
      this.dialogVisible = true
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    loginOut() {
      window.localStorage.setItem('userInfo', null)
      this.$router.push({
        path: '/'
      })
    },
    payCart() {
      this.$router.push({
        path: '/shoppingCart'
      })
    },
    // 订单查询
    orderLook() {
      this.$router.push({
        path: '/order'
      })
    }
  }
}
</script>

<style lang="scss">
    .top-nav-bar{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #f1f3f6;
      color: #666e73;
      font-size: 12px;
      line-height: 40px;
      padding: 0 25%;
      .function-bar{
          display: flex;
          justify-content: flex-start;
          div{
              margin-right: 50px;
              span{
                  margin-right: 5px;
              }
          }
      }
    }
    .search-box{
      width: 1200px;
      display: flex;
      align-items: center;
      padding:20px 0 20px 0px;
      margin: 0 auto;
      .search-title{
        display: flex;
        flex-direction: column;
        color: #fd684a;
        margin-right: 50px;
        align-items: center;
        span:nth-child(1){
          font-size: 35px;
        }
        span:nth-child(2){
          color: #f8bcae;
          font-size: 18px;
        }
      }
      .search{
        width: 500px;
        ::v-deep .el-input__inner{
        border-color: #fd684a !important;
        }
        ::v-deep  .el-input-group__append{
          background-color: #fd5e40 !important;
          color: white;
          border-color: #fd5e40;
        }
      }
    }
</style>
